<template>
	<view class="content">
		<view class="listItem">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<text style="font-size: 30upx;color: #656565;">用户名</text>
				<text style="font-size: 30upx;color: #656565;">{{userInfo.nickName}}</text>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">名称</text>
				<text style="font-size: 30upx;color: #656565;">{{item.name}}</text>
			</view>
		</view>
		<view class="listItem" style="margin-top: 0upx;">
			<view  v-if="current!=3"  style="display: flex;justify-content: space-between;align-items: center;">
				<text style="font-size: 30upx;color: #656565;">订单金额</text>
				<text style="font-size: 30upx;color: #FB9C28;">{{item.usdt}}USDT/{{item.fil}}FIL</text>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">购买份额</text>
				<yp-number-box :min="1" :value="buyNum" @change="numberChange" :index="111" />
			</view>
			<view  v-if="current!=3" style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">矿工算力</text>
				<text style="font-size: 30upx;color: #656565;">{{item.computePower}}</text>
			</view>
			<view v-if="current==3"  style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">年化率</text>
				<text style="font-size: 30upx;color: #FB9C28;">{{item.nhl}}%</text>
			</view>
			<view  style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">合约周期</text>
				<text style="font-size: 30upx;color: #656565;">{{item.hyzq}}天</text>
			</view>
			<view  v-if="current!=3" style="display: flex;justify-content: space-between;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;">封存周期</text>
				<text style="font-size: 30upx;color: #656565;">{{item.fczq}}天</text>
			</view>
		</view>
		<view class="bottom">
			<view style="display: flex;">
				<text style="font-size: 30upx;color: #656565;">合计</text>
				<text style="font-size: 30upx;color: #FB9C28;margin-left: 20upx;">{{item.usdts}}USDT/{{item.fils}}FIL</text>
			</view>
			<button style="background-color: #F5CB5B;color: #433302;font-size: $uni-font-size-base;margin: 0px;" @tap="payConfirm">立即支付</button>
		</view>
		 <ssPaymentPassword ref="paymentPassword" :mode="mode" @submit="submitHandle" /> 
	</view>
</template>

<script>
	import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"
	import ssPaymentPassword from '@/components/sanshui-payment-password'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			ypNumberBox,
			ssPaymentPassword
		},
		data() {
			return {
				token:'',
				buyNum:1,
				mode: 0,
				item:{}
			}
		},
		onLoad(option) {
			var that=this;
			that.item_id = option.id;
			that.current=option.current;
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onShow(){
			var that=this;
			that.checkToken();
		},
		methods: {
			numberChange:function(data){
				var that = this;
				that.buyNum = data[1];
				that.$set(that.item,'usdts',Number(that.buyNum * that.item.usdt));
				that.$set(that.item,'fils',Number(that.buyNum * that.item.fil));
			},
			submitHandle(e){
				var that =this;
				//console.log(e)
				//支付接口 /api/v1/cp/kj/order
				
				var check=e.check;
				var password=e.value;
				
					var url='';
					if(that.current!=3){
						url = that.serverUrl2 + '/biz/api/v1/cp/kj/order'
					}
					else{
						url = that.serverUrl2 +'/biz/api/v1/cp/cbsx/order'
					}
					
					uni.request({
							url: url,
							method: "POST",
							data:{
								'cpId':that.item.id,
								'cbsl':that.buyNum,
								'gmsl':that.buyNum,
								'password':password
							},
							header: {
								'content-type': 'application/json',
								'Authorization': 'Bearer '+that.token
							},
							success: (res) => {
								console.log(res.data);
								if (res.data.code == 200) {
									
									uni.navigateTo({
										url:'payResult?id='+that.item.id+'&buyNum='+that.buyNum+'&current='+that.current
									})
									
								}else{
									uni.showToast({
									title: res.data.msg,
									icon:'none',
									duration: 2000
									});
									return false;
								}
							},
							fail: (error) => {
								console.log(error);
							}
						})
				
			},
			payConfirm:function(){
				var me = this;
				me.$refs.paymentPassword.modalFun('show');
			},
			
			checkToken(){
				var that=this;
				 uni.getStorage({
				    key: 'token',
				    success: function (res) {
						that.token=res.data;
						that.getDetail(res.data);
				    },
					fail:function(error){
						uni.navigateTo({
							url: `/pages/login/login`
						})
					}});
			},
			//获取详情 1,2 是 矿机 3是存币生息
			getDetail(token){
				
				var that=this;
				var url='';
				if(that.current!=3){
					url = that.serverUrl2 + '/biz/api/v1/cp/kj/'+that.item_id
				}
				else{
					url = that.serverUrl2 +'/biz/api/v1/cp/cbsx/'+that.item_id
				}
				
				uni.request({
						url: url,
						method: "GET",
						header: {
							'content-type': 'application/json',
							'Authorization': 'Bearer '+token
						},
						success: (res) => {
							if (res.data.code == 200) {
								console.log(res.data);
								that.item=res.data.data;
								
								that.$set(that.item,'usdts',Number(that.buyNum * that.item.usdt));
								that.$set(that.item,'fils',Number(that.buyNum * that.item.fil));
							}
						},
						fail: (error) => {
							console.log(error);
						}
					})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background-color: #F2F2F2;
	}
	.listItem {
		display: flex;
		flex-direction: column;
		margin-top: 40upx;
		width: 82%;
		margin-left: 4%;
		margin-right: 4%;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 5%;
		margin-bottom: 40upx;
		
	}
	.bottom {
		position: fixed;
		bottom: 0px;
		height: 100upx;
		margin-top: 30upx;
		margin-bottom: 40upx;
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
